<template>
  <div class="home">
    <div style="width: 100%;height: 100%" ref="maine"></div>
  </div>
</template>

<script>
// 使用echart的3d功能需要另外安装echarts-gl  安装指令： cnpm install echarts-gl
import 'echarts-gl'

const worl = require('@/assets/map/world.json')

export default {
  data () {
    return {
      chinachart: null
    }
  },
  mounted () {
    // 初始化echarts实例

    this.chinachart = this.$echarts.init(this.$refs.maine)

    function getAirportCoord (idx) {
      return [worl.airports[idx][3], worl.airports[idx][4]]
    }
    var routes = worl.routes.map(function (airline) {
      return [
        getAirportCoord(airline[1]),
        getAirportCoord(airline[2])
      ]
    })

    const option = {
      backgroundColor: '#000',
      globe: {
        baseTexture: 'img/world.topo.bathy.200401.jpg',
        heightTexture: 'img/bathymetry_bw_composite_4k.jpg',

        shading: 'lambert',

        light: {
          ambient: {
            intensity: 0.4
          },
          main: {
            intensity: 0.4
          }
        },

        viewControl: {
          autoRotate: false
        }
      },
      series: {

        type: 'lines3D',

        coordinateSystem: 'globe',

        blendMode: 'lighter',

        lineStyle: {
          width: 1,
          color: 'rgb(50, 50, 150)',
          opacity: 0.1
        },

        data: routes
      }
    }

    this.chinachart.setOption(option)
  }
}
</script>

<style>
.home{
  height: 100%;
  width: 100%;
}
</style>
